<template>
    <div>
        <p>{{ name }}</p>
        <input
            type="text"
            v-model="newStudentName"
            placeholder="输入学生姓名，回车添加..."
            @keyup.enter="add"
        />
    </div>
</template>

<script>
import { nanoid } from "nanoid";
export default {
    name: "Headmaster",
    // 1.接收来自父组件的方法
    props: {
        addStudent: Function,
    },
    data() {
        return {
            name: "邓布利多",
            newStudentName: "",
        };
    },
    methods: {
        add() {
            // 2.在特定的逻辑下调用这个父组件传递来的方法
            if (this.newStudentName.trim() == "") return alert("输入不能为空");
            let newStudent = { id: nanoid(), name: this.newStudentName.trim() };
            this.addStudent(newStudent);
            this.newStudentName = "";
        },
    },
};
</script>

<style></style>
